<template>
  <view class="container">
    <view class="search-wrap">
      <u--input
        placeholder="请输入单位名称"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
        shape="circle"
        v-model="likeName"
        @change="input_change"
      ></u--input>
      <view class="right-filter-box" @click="handleFilterEnterpress">
        <image
          :src="baseImgUrl + 'filter-icon.png'"
          class="icon-filter"
        ></image>
        <view class="i-text">
          {{ informationId_text ? informationId_text : "筛选" }}
        </view>
      </view>
    </view>

    <view class="list-content">
      <view class="list-container">
        <scroll-view
          scroll-y="true"
          @scrolltolower="scrollBottom"
          @scroll="scrollHeight"
          :style="{ height: !loading && !noMore ? '100%' : '100%' }"
          v-if="dataSource.length"
        >
          <view
            class="house-info"
            v-for="(item, index) in dataSource"
            @tap="handleDetail(item)"
            :key="index"
          >
            <view class="house-name">
              <text>{{ item.companyName }}</text>
              <u-icon name="arrow-right" color="#A2A2A2"></u-icon>
            </view>

            <view class="info-row">
              <view class="label">所属分类:</view>
              <view class="value">{{ item.industryInformationName }}</view>
            </view>
            <view class="info-row">
              <view class="label">采集时间:</view>
              <view class="value">{{ item.companyTime }}</view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>

        <view v-if="!dataSource.length">
          <u-empty
            mode="list"
            text="暂无内容！"
            :icon="baseImgUrl + 'no-icon2.png'"
          >
          </u-empty>
        </view>
      </view>
    </view>

    <view class="btns thispageBtn">
      <button
        class="submit-btn"
        type="primary"
        @click="handleClickRouter"
        :data-url="`/actual_enterprises/addBusiness`"
        icon="map"
        style="width: 100%"
      >
        添加单位
      </button>
    </view>

    <uni-data-picker
      style="width: 0; height: 0; display: block; overflow: hidden"
      ref="dataPickerRef"
      placeholder="请选择行业分类"
      popup-title="请选择行业分类"
      :localdata="addressList"
      :map="{ text: 'informationName', value: 'id' }"
      @change="handleDataPickerChange"
      :auto-close="false"
      @popupclosed="onPopupclosed"
      v-model="informationData"
    >
      <view slot="bottom-btn" class="picker-data-box">
        <u-button
          text="重置"
          :customStyle="{
            ...cancelHalfButton,
            width: '690rpx',
          }"
          @click="handleReset"
        ></u-button>
      </view>
    </uni-data-picker>
  </view>
</template>

<script>
import { informationTree } from "../api/myself";
import { getAction, postAction } from "@/utils/request.js";
import {
  handleClickRouter,
  isLoading,
  navTo,
  cancelHalfButton,
  submitHalfButton,
} from "@/utils/util.js";
import lodash from "@/utils/lodash.js";

export default {
  data() {
    return {
      likeName: "", // 检索条件
      dataSource: [],
      pageBottom: false,
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: uni.getStorageSync("imgPrefix"),
      scrollTop: 0,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      addressList: [],
      dataPickerRef: null,
      cancelHalfButton,
      submitHalfButton,
      informationId: "",
      informationId_text: "",
      informationData: "",
    };
  },
  onLoad() {
    this.getBusiness();
    uni.$on("actual_enterprises_addBusiness", () => {
      this.getBusiness();
    });
    informationTree().then((res) => {
      if (res.code == 200) {
        this.addressList = res.result || [];
      }
    });
  },
  onUnload() {
    uni.$off("actual_enterprises_addBusiness");
  },
  methods: {
    getBusiness() {
      this.dataSource = [];
      this.pageConfig.pageNo = 1;
      this.getList();
    },
    handleClickRouter,
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom(e) {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) this.getList();
      else this.pageBottom = true;
    },

    input_change(e) {
      this.scrollTop = 0;
      uni.removeStorageSync("scrollTop");
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
    },

    async getList() {
      isLoading();
      try {
        let params = {
          likeName: this.likeName,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };
        if (this.informationId) {
          params.informationId = this.informationId;
        }
        const { result } = await getAction(
          "/company/message/enterpriseList",
          params
        );
        this.dataSource = this.dataSource.concat(result.records || []);
        this.pageConfig.total = result.total;
      } catch (error) {
        console.log("error", error);
      } finally {
        isLoading(false);
      }
    },
    handleDetail(item) {
      setTimeout(() => {
        uni.hideKeyboard();
      }, 200);
      navTo({
        url: `/actual_enterprises/passBusinessDetails`,
        params: {
          id: item.id,
        },
      });
      setTimeout(() => {}, 250);
    },
    handleFilterEnterpress() {
      this.$refs.dataPickerRef.show();
    },
    handleDataPickerChange(e) {
      // 给 text 和 value 赋值
      let value = lodash.get(e, "detail.value", []);
      if (value.length) {
        // 取最后一个的值作为 value
        // 合并 text 展示
        let id = value[value.length - 1].value;
        this.informationId = id;
        let text = [...value]
          .reverse()
          .map((item) => {
            return item.text;
          })
          .join("/");
        this.informationId_text = text;
        this.handleSubmit();
      }
    },
    handleSubmit() {
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
      this.$refs.dataPickerRef.hide();
    },
    handleReset() {
      this.informationId = "";
      this.informationId_text = "";
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
      this.$refs.dataPickerRef.clear();
      this.$refs.dataPickerRef.hide();
    },
    onPopupclosed(e) {},
  },
};
</script>

<style scoped lang="scss">
::v-deep .u-icon,
.u-icon__icon {
  font-size: 16rpx;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.picker-data-box {
  display: flex;
  padding: 15rpx 0;

  /deep/.u-button__text {
    font-weight: 500 !important;
  }
}

.search-wrap {
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  display: flex;

  .right-filter-box {
    color: rgb(36, 136, 245);
    display: flex;
    align-items: center;

    .icon-filter {
      width: 33rpx;
      height: 35rpx;
      margin-left: 4rpx;
      margin-right: 4rpx;
    }

    .i-text {
      font-size: 28rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      flex-shrink: 0;
      max-width: 150rpx;
    }
  }
}

.list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20rpx;

  .list-container {
    flex: 1;
    overflow: scroll;

    .house-info {
      height: 256rpx;
      background: #fff;
      border-radius: 16rpx;
      border: 1rpx solid #f4f5f7;

      margin: 10rpx 0;
      padding: 30rpx 30rpx 24rpx 48rpx;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .house-name {
        display: flex;
        align-items: center;
        justify-content: space-between;

        font-weight: bold;
        font-size: 30rpx;
        color: #000000;
      }

      .info-row {
        display: flex;
        align-items: center;

        .label {
          min-width: 120rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #a2a0a0;
        }

        .value {
          font-weight: 400;
          font-size: 26rpx;
          color: #6b6b6b;
          margin-left: 15rpx;
        }
      }
    }
  }
}
</style>
